JavaScript高级-unit10 DOM

简介

DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面。

节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

每个节点都有一个nodeType属性，用于表明节点的类型。并不是所有节点类型都受到Web浏览器支持，最常用的事元素和文本节点。

Node.ELEMENT_NODE(1); // 元素
Node.ATTRIBUTE_NODE(2); // 属性
Node.TEXT_NODE(3); // 文本
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8); // 注释
Node.DOCUMENT_NODE(9); // 文档
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

因为IE没有公开Node类型的构造函数，所以确定节点类型如下：

// nodeType 是只读的
if (someNode.nodeType == 1) {
    alert("Node is an element");
}

Node类型

1、nodeName 和 nodeValue 属性

// 使用前先检查节点类型，确认是否是一个元素，对于元素节点
// nodeName 保存的是标签名（节点的名称），nodeValue = null （节点的值）;
if (someNode.nodeType == 1) {
    value = someNode.nodeName;    // nodeName的值是元素的标签名
}

2、节点关系

每个节点都有一个 childNodes 属性，保存着一个 NodeList 对象。

是一个数组对象，保存一组有序的节点，可以通过位置访问节点。有length属性，但不是数组实例。
基于DOM结构动态执行查询结果，结构的变化能够自动反应着NodeList对象中。
可以用 item() 方法访问其中的节点。

var firstChild  = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1); 

// 将NodeList对象转化为数组
function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(node,0);    // 针对非 IE 浏览器
    } catch {
        array = new Array();
        for (var i=0, len=nodes.length; I < len; i++) {
            array.push(nodes[I]);
        }
    }
    return array;
}

parentNode 属性：指向文档树中的父节点
父节点的 firstChild 和 lastChild 属性指向第一个和最后一个
previousSibling: 上一个同胞节点
nextSibling: 下一个同胞节点
hasChildNodes(): 节点包含一个或多个子节点返回 true
ownerDocument: 指向表示整个文档的文档节点
document.documentElement - 全部文档
document.body - 文档的主体

3、操作节点

以下方法都需要取得父节点（使用 parentNode 属性）

appendChild(): 向 childNodes 列表末尾添加一个节点。如果已存在，从原来位置移动到新位置
insertBefore(): 插入节点，接受两个参数，要出入的节点和参考节点（谁的前面）
replaceChild(): 替换节点，接受两个参数，要插入的节点和要替换的节点
removeChild(): 移除节点

以下两个方法是所有类型的节点都有

cloneNode(): 创建节点的副本，参数为true，复制节点及整个子节点树，false只复制节点本身，没有父节点，需要用上面方法添加到文档中
normalize(): 处理文档树中的文本节点。可能会出现文本节点不包含文本，或者接连出现两个文本节点。调用这方法，如果找到空文本，则删除；找到相邻文本节点，则合并为一个

Document 类型

JavaScript通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个HTML页面。而且 document 也是 window 对象的一个属性，因此可以将其作为全局对象来访问。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

nodeName 的值为 “#document”;
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；
其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。

1、文档的子节点

内置的访问子节点的快捷方式：

documentElement 属性：始终指向HTML页面的<html>元素
childNodes 列表访问文档元素

作为内置的HTMLDocument对象，document 对象有一个 body 属性，直接指向 <body> 元素。

// 所有浏览器都支持
var html = document.documentElement;    // 取得对<html>对引用
var body = document.body;    // 取得对<body>对引用

用不着在 document 对象上调用 appendChild()、removeChild()和replaceChild()方法，因为文档类型（如果存在）是只读的，而且它只能有一个元素子节点（通常早存在）。

2、文档信息

document 对象还有一些标准的Document对象所没有的属性。这些对象表现的网页的一些信息。

// 取的文档标题
var originalTitle = document.title;
// 设置文档标题
document.title = "New page title";

// 取得完成的URL
var url = document.URL;
// 取的域名
var domain = document.domain;
// 取的来源页面的URL
var referrer = document.referrer;

只有 domain 可以设置，如果包含子域名，不能设置为URL中不包含的域。
由于跨域安全限制，来自不同子域的页面无法通过 Javascript 通信，可以将每个页面的document.domain设置为相同值，就可以互相访问对方包含的JavaScript对象了。
如果域名一开始是“松散的”，就不能设为“紧绷的”，设为“wrox.com”，就不能设为“p2p.wrox.com”。

3、查找元素

取得特定的某个或某组元素的引用，然后执行一些操作。

getElementById(): 要获取的元素 id，返回第一个出现的，如果没找到返回 null
getElementsByTagName(): 参数（要取得元素的标签名），返回包含零个或多个元素的 NodeList。在HTML文档中，返回一个 HTMLCollection 对象，作为动态集合。传入“*”，取得文档中的所有元素
getElementsByName(): 返回给定 name 特性的所有元素。最常用取得单选按钮（单选按钮必须具有相同的 name 特性）

// 取得页面中所有的<img>元素，并返回一个HTMLCollection
var images = document.getElementsByTagName("img");
alert(images.length);    // 图像的数量
alert(images[0].src);    // 第一个图像元素的src特性
alert(images.item(0).src);    // 第一个图像元素的src特性

HMTLCollection 对象

有一个 namedItem() 方法，可以通过元素的 name 特性取得集合中的项
支持按名称访问项

<img src="my image.gif" name="myImage">
var myImage = images.namedItem("myImage");

var myImage = images["myImage"];

4、特殊集合

除了属性和方法，document 对象还有一些特殊的集合，都是 HTMLCollection对象，

document.anchors ,包含文档中所有带 name 特性的 <a> 元素；
document.applets ,所有的 <applet>元素，不建议使用；
document.forms ,文档中所有的 <form> 元素；
document.images ,文档中所有的 <img> 元素；
document.links ,文档中所有带 href 特性的 <a> 元素。

5、DOM一致性检测

document.implementation 属性提供相应信息和功能的对象，与浏览器对 DOM 的实现直接对应。
规定一个方法：hasFeature（），接受两个参数：要检测的 DOM 功能名称及版本号

var hasXmlDom = document.implementation.hasFeature("XML","1.0");

6、文档写入

write(): 原样写入
writeln(): 在字符串的末尾添加一个换行符（n）
open(): 打开网页的输出流
close(): 关闭网页的输出流

// 用 write() 和 written() 动态地包含外部资源
<html>
<head>
    <title>document.write() Example</title>
</head>
<body>
    <script type="text/javascript">
        document.write("<script type=\"text/javascript\" src=\"file.js\">" +
            "<\/script>");
    </script>
</body>

严格型 XHTML 文档不支持文档写入。

Element 类型

Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、字节点及特性的访问。

nodeType 的值为 1；
nodeName 的值为元素的标签名；
nodeValue 的值为 null；
parentNode 可能是 Document 或 Element；
其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference；
访问元素标签名，可以是使用 nodeName 属性或者 tagName 属性。

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
alert(div.tagName);    // "DIV"
alert(div.tagName == div.nodeName);    // true

在 HTML 中，标签名始终都以全部大写表示；而在 XML（有时包括 XHTML），标签名始终与源代码中的保持一致。

if (element.tagName.toLowerCase() == "div") {    // 适用于任何文档
    // ...
}

1、HTML 元素

所有的 HTML 元素都由 HTMLElement 类型表示。每个 HTML 元素都存在的下列标准特性。

id，元素中文档中的唯一标识符
title，有关元素的附加说明信息，一般通过工具提示条现实出来
lang，元素内容的语言代码
dir，语言的方向，值为“ltr”（左到右），或“rtl”（右到左）
className，与元素的 class 特性对应，即为元素指定的CSS类。（是 ECMAScript 的保留字）

// 上述这些属性都可以用来取得或修改相应的特性值
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
var div = document.getElementById("myDiv");
alert(div.id);
div.id = "someOtherId";
alert(div.className);
div.className = "ft";

2、取得特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。

getAttribute(): 取得特性，传递的特性名与实际的特性名相同，可以是自定义的特性。
setAttribute(): 设置特性。设置的特性名统一转为小写。
removeAttribute(): 不仅会清除特性值，也会从元素中完成删除特性。

有两类特殊的特性：

style: 通过getAttribute()访问返回特性值中包含的文本，通过属性来访问返回一个对象。
onclick: 通过 getAttribute()返回相应代码的字符串，访问属性时返回函数。

div.setAttribute("id","someOtherId");

3、attributes 属性

attributes 属性包含一系列节点，每个节点的 nodeName 就是特性的名称，而节点的 nodeValue 就是特性的值。
包含一个 NamedNodeMap，“动态”集合。

getNamedItem()：返回 nodeName 等于 name 的节点
removeNamedItem()：从列表中移除 nodeName 属性等于 name 的节点
setNamedItem()：向类表添加节点，以节点的 nodeName 属性为索引
item(pos)：返回位于数字pos 的节点

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

遍历元素的特性，attributes 属性可以派上用场。

function outputAttributes(element) {
    var pairs = new Array(),
        attrName,
        attrValue,
        y,
        len;
     
     for（y = 0, len = element.attributes.length; y < len; y++) {
         attrName = element.attributes[y].nodeName;
         attrValue = element.attributes[y].nodeValue;
         if (element.attributes[y].specified) {
             pairs.push(attrName + "=\"" + attrValue + "\"");
         }
     }
     return pairs.join(" ");
}

// attributes 对象的中的特性，不同浏览器返回的顺序不同
// IE7 及更早版本会返回 HTML 元素中所有可能的特性，包括没有指定的特性。每个特性节点都有一个 specified 的属性，true：在 HTML 中指定来相应特性，要么可以通过 setAttribute() 方法设置了该特性。

4、创建元素

// 接受一个参数，即要创建元素的标签名
var div = document.createElement("div");

// 也为新元素设置了 ownerDocument 属性，还可以操作元素的特性，添加更多的子节点
div.id = "myNewDiv";
div.className = "box";

// 新元素添加到文档树中 appendChild()、insertBefore()、replaceChild()
document.body.appendChild(div);

在 IE 中可以另一种方法，传入完整的元素标签

var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");

5、元素的子节点

不同浏览器看待节点是不同的。
如果要通过 childNodes 属性遍历子节点，不要忘了浏览器之间的区别，通常先检查一下 nodeType 属性

for (var y = 0, len = element.childNodes.length; y < len; y++) {
    // 表示是元素节点
    if (element.childNodes[y].nodeType == 1) {
        // ...
    }
}

通过特定的标签名取得子节点或后代节点

var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li");

Text 类型

文本节点由 Text 类型表示，包含纯文本内容，即包含转义后的 HTML 字符，但不包含 HTML 代码。

nodeType 的值为 3；
nodeName 的值为 “#text”；
nodeValue 的值为节点所包含的文本；
parentNode 是一个 Element；
不支持（没有）子节点；

通过 nodeValue 属性或 data 属性访问 Text 节点包含的文本。

appendData(text)：将 text 添加到节点的末尾。
deleteData(offset, count)：从 offset 指定的位置开始删除 count 个子符。
insertData(offset, text)：在 offset 指定的位置插入 text。
replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset + count 为止的文本。
splitText(offset)：从 offset 指定的位置将当前文本节点分为两个文本节点。
substringData(offset, count)：提取从 offset 指定的位置开始到 offset + count 为止的字符串。

在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在。

// 没有内容，也就没有文本节点
<div></div>

// 有空格，因而有一个文本节点
<div> </div>

// 有内容，因而有一个文本节点
<div>hello world!</div>

// 访问，先取得引用
var textNode = div.firstChild;  // 获取 div.childNodes[0]
textNode.nodeValue = "some other message";

在修改文本节点时，此时的字符串会经 HTML 编码（转义）。

1、创建文本节点

document.createTextNode()：创建文本节点，接受一个参数，要插入的文本，也会进行转义。

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world");
element.appendChild(textNode);

var anotherTextNode = document.createTextNode("Yippee");
element.appendChild(anotherTextNode);

document.body.appendChild(element);

如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本会连起来显示，中间不会有空格。

2、规范化文本节点

normalize()：在一个包含两个或多个文本节点的父元素上调用，则会将所有文本节点合并成一个节点。

Comment 类型

nodeType 的值为 8；
nodeName 的值为 “#comment”;
nodeValue 的值是注释的内容；
parentNode 可能是 Document 或 Element；
不支持（没有）子节点。

和 Text 类型相似，可以通过 nodeValue 或 data 属性来取得注释的内容。

<div id="myDiv"><!-- A comment --></div>

// 通过父节点访问
var div = document.getElementById("myDiv"); 
var comment = div.firstChild;
alert(comment.data);

使用 document.createComment() 为其传递注释文本也可以创建注释节点。

var comment = document.createComment("A comment");

如果要访问注释节点，一定要保证他们是 <html> 元素的后代。

DocumentFragment 类型（文档片段）

在文档中没有对应的标记；
nodeType 的值为 11；
nodeName 的值为 “#document-fragment”;
nodeValue 的值为 null；
parentNode 的值为 null；

不能把文档片段直接添加到文档中，但可以作为一个“仓库”，保存将来可能添加到文档中的节点。如果将文档中的节点添加到文档片段中，就会从文档树移除该节点，文档片段本身不会成为文档树的一部分。

// 创建文档片段 
var fragment = document.createDocumentFragment();

// 为 ul 元素添加3个列表项
var ul = document.getElementById("myList");
var li = null;

for (var i=0; i < 3; i++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item " + (i+1)));
    fragment.appendChild(li);
}

ul.appendChild(fragment);

Attr 类型

元素的特性在 DOM 中以 Attr 类型来表示。特性就是存在于元素的 attributes 属性中的节点。

nodeType 的值 2；
nodeName 的值是特性的名称；
nodeValue 的值是特性的值；
parentNode 的值为 null；
在 HTML 中不支持子节点；
在 XML 中子节点可以是 Text 或 EntityReference。

尽管是节点，但不是 DOM 文档树但一部分。有3个属性：

name：特性名称（与 nodeName 相同）；
value：特性的值（与 nodeValue 的值相同）；
specified：一个布尔值，区别特性在代码中是指定的，还是默认的。

// 创建
var attr = document.createAttribute("align");
attr.value = "left";
// 添加到元素中
element.setAttributeNode(attr);

JavaScript高级-unit10 DOM

简介

节点

Node类型

Document 类型

Element 类型

Text 类型

Comment 类型

DocumentFragment 类型（文档片段）

Attr 类型

大导演里维斯

引用和评论

HTML表单（来自MDN的总结）

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号